<template>
  <div>
    <van-list @load="pullUp"
              offset="100"
              :finished="finished"
              finished-text="没有更多了"
              v-model="loading">
      <div class="recommed_wrap">
        <div class="recommed_title">
          <img src="//img11.360buyimg.com/jdphoto/jfs/t1/31601/22/15554/14040/5cc2a86fEbdb1098b/88174b36f85283b6.png"
               alt="">
        </div>
        <div class="recommed_list">
          <div class="recommed_one"
               v-for="(item,index) in recommedList"
               :key="index"
               @click="turnInfo(item.goods_id)">
            <img :src="item.image">
            <p>{{item.goods_name}}</p>
            <div>
              <span>￥{{item.price}}</span>
              <span>看相似</span>
            </div>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  data () {
    return {
      page: 1,
      finished: false,//是否上拉完成
      loading: false,//是否在加载中
    }
  },
  computed: {
    ...mapGetters("homeStore", ["recommedList"])
  },
  created () {
    // 调用actions 获取推荐列表数据
    this.getRecommedAction(this.page)
  },
  methods: {
    ...mapActions("homeStore", ["getRecommedAction"]),
    turnInfo (id) { //跳转详情并传参
      this.$router.push({ name: "info", query: { gid: id } })
    },
    pullUp () {
      // 上拉触发的事件函数
      this.page++
      if (this.page >= 15) {
        this.finished = true;//结束上拉  
        return false
      }
      this.loading = true; //正在加载
      this.getRecommedAction(this.page).then(() => {
        this.loading = false; //加载完成
      })
    }
  }
}
</script>
<style lang="less">
.recommed_wrap {
  width: 100%;
  margin-top: 10px;
  .recommed_title {
    img {
      width: 100%;
      height: 80px;
    }
  }
}
.recommed_list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .recommed_one {
    width: 45%;
    height: 500px;
    margin-top: 15px;
    background: white;
    text-align: center;
    img {
      width: 320px;
      height: 320px;
    }
    p {
      padding: 0 20px;
      box-sizing: border-box;
      height: 80px;
      line-height: 40px;
      font-size: 18px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      margin-top: 10px;
    }
    div {
      display: flex;
      padding: 0 20px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      span:nth-child(2) {
        width: 100px;
        text-align: center;
        height: 30px;
        line-height: 30px;
        border: 1px solid red;
      }
    }
  }
}
</style>